<template>
	<view class="main" @click.prevent="detail">
		<view class="first-line">
			<span style="font-size: 32rpx; font-weight: 600;">{{isDoing==0 ?data.position.name:data.name}}</span>
			<u-tag v-show="isDoing !==2" text="加入群聊" mode="light" type="primary" shape="circle" @click.native.stop="join" />
		</view>
		<view style="font-size: 28rpx; margin-top: 20rpx;">
			项目价格￥{{ isDoing==0 ? data.position.price:data.price}}，已结算￥{{ isDoing==0 ? data.position.settlement_price:data.settlement_price}}
		</view>
		<view class="project">
			<span class="label">
				<u-icon name="calendar"></u-icon>名称
			</span>
			<span class="detail">{{ isDoing==0 ? data.position.project.name:data.project.name}}</span>
		</view>
		<view class="project">
			<span class="label">
				<u-icon name="calendar"></u-icon>周期
			</span>
			<span class="detail"
				style="margin-bottom: 20rpx;">{{ isDoing==0 ? data.position.cycle: data.cycle}}天</span>
		</view>
		<view style="position: absolute;bottom: 20rpx;right: 40rpx;" v-if="isNormal">
			<u-tag text="取消中标" @click.native.stop="cancel" shape="circle" style="color: #fff;background: #FF8A8A;border: 1px solid #FF0000;"/>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						name: "前端",
						total_price: "",
						settlement_price: "",
						cycle: "",

					}
				}
			},
			isDoing: Number,
			isNormal: Boolean,
		},
		data() {
			return {
				proName: "",
				price: 0,
				date: "",
				picSrc: ""

			}
		},
		onLoad() {},
		methods: {
			join() {
				this.picSrc = this.data.wechat_qrcode_text
				this.$emit("joinTeam", this.picSrc)
			},
			cancel(){
				this.$emit("cancel", this.data)
			},
			detail(){
				this.$emit("detail", this.data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		position: relative;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 15rpx;
		padding: 20rpx 40rpx;
		box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		color: rgba(0, 0, 0, .7);
	}

	.heizi {
		color: #333333;
		font-size: 32rpx;
	}

	.project {
		color: rgba(0, 0, 0, .5);
		margin-top: 20rpx;

	}

	.label {
		font-size: 26rpx;
		margin-right: 40rpx;
	}

	.first-line {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}

	.detail {
		font-size: 26rpx;
	}
</style>
